<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span>{{ $t("basic_information") }}</span>
        </div>
        <el-form-item
          :label="$t('payroll_calculation_name')"
          prop="calculationName"
        >
          <el-input
            v-model="form.calculationName"
            :placeholder="
              $t('please_enter', { name: $t('payroll_calculation_name') })
            "
            :show-word-limit="true"
          />
        </el-form-item>
        <el-form-item :label="$t('payroll_group')" prop="salaryGroupId">
          <el-select
            v-model="form.salaryGroupId"
            :placeholder="$t('please_enter', { name: $t('payroll_group') })"
            @change="changeSalaryGroup"
            clearable
            filterable
          >
            <el-option
              v-for="dict in salaryGroupOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('calculation_type')"
          prop="salaryCalculationType"
        >
          <el-select
            v-model="form.salaryCalculationType"
            :placeholder="$t('please_enter', { name: $t('calculation_type') })"
            clearable
          >
            <el-option
              v-for="dict in dict.type.salary_calculation_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('select_payroll_month')"
          prop="calculationMonth"
        >
          <el-date-picker
            v-model="form.calculationMonth"
            type="month"
            :placeholder="$t('please_select',{name:''})"
            format="yyyy-MM"
            value-format="MM"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <template v-if="form.salaryCalculationType == 2">
          <el-form-item :label="$t('payroll_cycle')">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="MM-dd"
              format="MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('start_date')"
              :end-placeholder="$t('ending_date')"
              clearable
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('hoc_calculation_items')"
            prop="temporaryCalculationReason"
          >
            <el-input
              v-model="form.temporaryCalculationReason"
              :placeholder="
                $t('please_enter', { name: $t('hoc_calculation_items') })
              "
              maxlength="100"
              :show-word-limit="true"
            />
          </el-form-item>
        </template>

        <el-form-item
          :label="$t('payroll_cycle')"
          prop="salaryGroupCycleId"
          v-if="form.salaryCalculationType == 1"
        >
          <el-select
            v-model="form.salaryGroupCycleId"
            :placeholder="$t('please_select', { name: $t('payroll_cycle') })"
            clearable
          >
            <el-option
              v-for="dict in salaryCycleOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('remarks')" prop="remark">
          <el-input
            v-model="form.remark"
            :placeholder="$t('please_enter', { name: $t('remarks') })"
            type="textarea"
            :rows="3"
            maxlength="100"
            :show-word-limit="true"
          />
        </el-form-item>
      </el-card>

      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span>{{ $t("payroll_payroll_group") }}</span>
        </div>
        <div
          style="margin-left: 80px"
          v-for="(item, index) in salaryProjectOptions"
          :key="index"
        >
          {{ item.salaryProjectName }}
          <span
            v-for="dict in dict.type.salary_project_data"
            :key="dict.value"
            :label="dict.value"
          >
            <span v-if="item.projectDataSource == dict.value">
              ：{{ dict.label }}</span
            >
          </span>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span>{{ $t("payment_information") }}</span>
        </div>
        <el-form-item :label="$t('payment_method')" prop="paymentMethod">
          <el-radio-group v-model="form.paymentMethod">
            <el-radio
              :label="dict.value"
              v-for="dict in dict.type.payment_method"
              :key="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('payment_currency')" prop="currencyType">
          <el-select
            v-model="form.currencyType"
            clearable
            :placeholder="$t('please_select', { name: $t('payment_currency') })"
          >
            <el-option
              v-for="dict in dict.type.currency_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span>{{ $t("advance_settings") }}</span>
        </div>
        <el-form-item prop="calculationStatus">
          <el-checkbox
            v-model="form.calculationStatus"
            :true-label="1"
            :false-label="0"
            >{{ $t("include_ad_hoc_calculation") }}</el-checkbox
          >
        </el-form-item>
      </el-card>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="submitForm">{{ $t("next") }}</el-button>
    </div>
  </div>
</template>

<script>
import { saveSalaryRange } from "@/api/salary/salaryCalculation";
export default {
  props: {
    form: {
      type: Object,
      default() {
        return {};
      },
    },
    salaryGroupOptions: {
      type: Array,
      default() {
        return [];
      },
    },
    salaryProjectOptions: {
      type: Array,
      default() {
        return [];
      },
    },
    salaryCycleOptions: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  dicts: [
    "salary_calculation_type",
    "currency_type",
    "payment_method",
    "salary_project_data",
  ],
  data() {
    let _minTime = null;
    let _maxTime = null;
    return {
      dateRange: [],
      pickerOptions: {
        onPick(time) {
          // 如果选择了只选择了一个时间
          if (!time.maxDate) {
            let timeRange = 3600 * 1000 * 24 * 365 * 1; // 3年
            _minTime = time.minDate.getTime() - timeRange; // 最小时间
            _maxTime = time.minDate.getTime() + timeRange; // 最大时间
            // 如果选了两个时间，那就清空本次范围判断数据，以备重选
          } else {
            _minTime = _maxTime = null;
          }
        },
      },
      // 表单校验
      rules: {},
    };
  },
  watch: {
    "form.salaryCalculationType": {
      handler(val) {
        if (val == 2) {
          this.setDateRange();
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    setDateRange() {
      if (this.form.startMonthType && this.form.endMonthType) {
        this.dateRange = [
          `${this.parseNumber(this.form.startMonthType)}-${this.parseNumber(
            this.form.startDate
          )}`,
          `${this.parseNumber(this.form.endMonthType)}-${this.parseNumber(
            this.form.endDate
          )}`,
        ];
      } else {
        this.dateRange = [];
      }
    },
    parseNumber(num) {
      return num < 10 ? `0${num}` : num;
    },
    changeSalaryGroup() {
      this.$emit("changeSalaryGroup");
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let form = { ...this.form };
          form.startMonthType = null;
          form.startDate = null;
          form.endMonthType = null;
          form.endDate = null;
          if (form.salaryCalculationType == 1) {
            form.temporaryCalculationReason = null;
          } else {
            form.salaryGroupCycleId = null;
            if (this.dateRange && this.dateRange.length) {
              let startArr = this.dateRange[0].split("-"),
                endArr = this.dateRange[1].split("-");
              form.startMonthType = Number(startArr[0]);
              form.startDate = Number(startArr[1]);
              form.endMonthType = Number(endArr[0]);
              form.endDate = Number(endArr[1]);
            }
          }
          saveSalaryRange(form).then((res) => {
            this.$emit("saveSalaryRangeFinish", res.data);
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
